<template>
  <div class="nav">
    <!--    logo搜索-->
    <div class="top_logo" v-if="this.$route.path === '/IndexNews'">
      <div class="logo">
        <img src="../assets/img/top_logo.jpg" alt="加载失败">
      </div>
      <div class="search">
        <el-input placeholder="请输入内容" clearable v-model="keyword" clearable>
          <el-button slot="append" icon="el-icon-search" @click="jumpSearch"></el-button>
        </el-input>
      </div>
      <ul class="other">
        <li>
          <img src="../assets/img/baidu.gif" alt="加载失败">
          <a :href="`https://www.baidu.com/s?wd=${keyword}`" target="_blank">百度搜索</a>
        </li>
        <li>
          <img src="../assets/img/sougou.jpg" alt="加载失败">
          <a :href="`https://www.sogou.com/tx?query=${keyword}`" target="_blank">搜狗搜索</a>
        </li>
      </ul>
    </div>

    <!--    主题分类-->
    <div class="topic">
      <ul>
        <li v-for="item in topic" @click="jump(item.topic)">{{item.topic}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "Nav",
    data() {
      return {
        topic: [],
        keyword: ''
      }
    },
    methods: {
      getTopic() {
        this.$store.dispatch('getTopic').then(() => {
          this.topic = this.$store.state.topic
        })
      },  //获取主题
      jump(topic) {
        this.$store.state.topicParameter = topic
        this.$router.push('/topic?topic=' + topic)
      },
      jumpSearch() {
        this.$router.push(`/search?keyword=${this.keyword}`)
        this.keyword = ''
      }
    },
    created() {
      this.getTopic()
    },
    computed: {
      ...mapState(['todayNews'])
    }
  }
</script>

<style scoped lang="less">
  .nav {
    width: 80%;
    margin: auto;

    .top_logo {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo {
        width: 200px;

        img {
          width: 100%;
        }
      }

      .search {
        width: 500px;
      }

      .other {
        /*width: 300px;*/
        overflow: hidden;
        display: flex;

        li {
          float: left;
          margin-right: 20px;
          line-height: 20px;
          font-size: 16px;
          img{
            display: inline-block;
            width: 30px;
            height: 30px;
          }
        }
      }
    }

    .topic {
      background: #1479D7;
      border-radius: 10px;
      margin-top: 20px;

      ul {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
      }

      li {
        font-size: 18px;
        font-weight: bold;
        width: 100px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        margin: 0 10px;
        color: white;
      }
    }

  }
</style>